<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>族谱管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .tree-line {
            position: absolute;
            background: #3498db;
        }
        
        .tree-line-vertical {
            width: 2px;
            height: 30px;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .tree-arrow {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid #3498db;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
        }

        .tooltip {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 15px;
            border-radius: 8px;
            font-size: 13px;
            line-height: 1.4;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            margin-top: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            max-width: 300px;
            white-space: normal;
        }

        .tooltip::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid rgba(0, 0, 0, 0.9);
        }

        .person-card:hover .tooltip {
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="min-h-screen bg-gray-50">
        <!-- 头部 -->
        <header class="bg-white shadow-sm border-b">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between items-center py-6">
                    <h1 class="text-3xl font-bold text-gray-800">族谱管理系统</h1>
                    
                    <!-- 导航按钮 -->
                    <nav class="flex space-x-4">
                        <button id="addBtn" class="px-4 py-2 rounded-lg font-medium transition-colors bg-white text-gray-700 border border-gray-300 hover:bg-gray-50">
                            添加成员
                        </button>
                        <button id="treeBtn" class="px-4 py-2 rounded-lg font-medium transition-colors bg-blue-500 text-white">
                            树状图
                        </button>
                        <button id="listBtn" class="px-4 py-2 rounded-lg font-medium transition-colors bg-white text-gray-700 border border-gray-300 hover:bg-gray-50">
                            目录层级
                        </button>
                        <button id="tableBtn" class="px-4 py-2 rounded-lg font-medium transition-colors bg-white text-gray-700 border border-gray-300 hover:bg-gray-50">
                            表格展示
                        </button>
                    </nav>
                </div>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="bg-white rounded-lg shadow-sm min-h-[600px]">
                
                <!-- 添加成员表单 -->
                <div id="formView" class="p-6 hidden">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6">添加族谱成员</h2>
                    
                    <form id="personForm" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    姓名 <span class="text-red-
                <div id="familyList" class="list-container"></div>
            </div>

            <!-- 表格展示 -->
            <div id="tableView" class="view-container hidden">
                <div id="familyTable" class="table-container"></div>
            </div>
        </main>
    </div>

    <script src="script.js"></script>
</body>

</html>""